{% extends "client_main.html" %}

{% block ext_title %}
    <link href="{{ MEDIA_URL }}jq/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" >
    <link href="{{ MEDIA_URL }}jq/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" >

    <script type="text/javascript" charset="utf-8" src="{{ MEDIA_URL }}jq/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="{{ MEDIA_URL }}jq/jquery-ui.js"></script>
    <script type="text/javascript" charset="utf-8" src="{{ MEDIA_URL }}jq/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="{{ MEDIA_URL }}jq/grid.locale-ru.js"></script>
    <script type="text/javascript">
        var sdate, edate;
        sdate = '{% now "Y-m-d" %}';
        edate = sdate;
        $(document).ready (function () {
            $('#startpicker').datepicker({
                dateFormat: 'yy-mm-dd',
                onSelect: function (dateText, inst) {
                    sdate = dateText;
                    $("#asn-table").jqGrid('setGridParam',{url:'stat/json/?' + 'sdate=' + sdate + '&edate=' + edate}).trigger("reloadGrid");
                }
            });
            $('#endpicker').datepicker({
                dateFormat: 'yy-mm-dd',
                onSelect: function (dateText, inst) {
                    edate = dateText;
                    $("#asn-table").jqGrid('setGridParam',{url:'stat/json/?' + 'sdate=' + sdate + '&edate=' + edate}).trigger("reloadGrid");
                }
            });
            $( "#startpicker" ).datepicker( "setDate" ,sdate);
            $( "#endpicker" ).datepicker( "setDate" ,edate);

            $("#asn-table").jqGrid({
                url:'stat/json/?' + 'sdate=' + sdate + '&edate=' + edate,
                datatype: "json",
                colNames:['Дата и Время','Источник', 'Назначение', 'Количество'],
                colModel:[
                    {name:'datetime',index:'datetime', minWidth:70},
                    {name:'src_ip',index:'src_ip', minWidth:70},
                    {name:'dst_ip',index:'dst_ip', minWidth:70},
                    {name:'count',index:'count', minWidth:70}
                ],
                rowNum:40,
                rowList:[20,50,100],
                pager: '#pager',
                height: 400,
                sortname: 'datetime',
                viewrecords: true,
                sortorder: "desc",
                autowidth: true,
                jsonReader: {
                    repeatitems : false,
                    id: "0"
                },
                caption: "Подробная статистика"
            });
            $("#asn-table").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,height: '10%'});
        });
    </script>
{% endblock %}
{% block content %}
    <div id="range-picker">
        Пожалуйста выбирете времменой интервал
        <p>
            <label for="startpicker">
                С
                <input type="text" id='startpicker' class="datepicker" tabindex="10">
            </label>
            <label for="endpicker">
                По
                <input type="text" id='endpicker' class="datepicker" tabindex="10">
            </label>
        </p>
    </div>
    <div id="total">

    </div>
    <div id="table-box">
        <table id='asn-table' ></table>
        <div id="pager"></div>
    </div>
{% endblock %}